<template>
  <div class="home-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入酒店名称或地址查询"
        style="width: 300px; margin-right: 10px;"
      />
      <el-button type="primary" @click="searchHotels">查询</el-button>
    </div>

    <!-- 酒店卡片网格布局 -->
    <div class="hotel-grid">
      <div v-for="hotel in hotelList" :key="hotel.id" class="hotel-card">
        <!-- 顶部酒店名称 -->
        <div class="hotel-name">
          <h3>{{ hotel.name }}</h3>
          <div class="star-rating">
            <el-rate
              v-model="hotel.starRating"
              disabled
              text-color="#ff9900"
              score-template="{value}"
            />
          </div>
        </div>
        
        <!-- 中间酒店图片 -->
        <div class="hotel-image">
          <img :src="getHotelImage(hotel)" alt="酒店图片">
        </div>
        
        <!-- 底部详情按钮 -->
        <div class="hotel-footer">
          <span class="price">¥{{ hotel.minPrice || '暂无' }} 起</span>
          <el-button type="primary" @click="viewHotelDetail(hotel.id)">查看详情</el-button>
        </div>
      </div>
    </div>
    
    <!-- 分页控件 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[6, 9, 12, 15]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '@/utils/request.js';
import { getHotelImageUrl } from '@/utils/imageUtil.js';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();
const searchKeyword = ref('');
const hotelList = ref([]);
const currentPage = ref(1);
const pageSize = ref(9); // 默认一页显示9个酒店
const total = ref(0);

// 获取酒店图片
const getHotelImage = (hotel) => {
  return getHotelImageUrl(hotel);
};

// 搜索酒店
const searchHotels = async () => {
  try {
    const res = await request.get('/hotel/selectPage', {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        name: searchKeyword.value,
        address: searchKeyword.value
      }
    });
    hotelList.value = res.data.list;
    total.value = res.data.total;
    
    // 获取每个酒店的最低价格
    await Promise.all(
      hotelList.value.map(async (hotel) => {
        try {
          const priceRes = await request.get(`/hotel/getMinPriceByHotelId/${hotel.id}`);
          hotel.minPrice = priceRes.data;
        } catch (error) {
          console.error('获取酒店最低价格失败', error);
          hotel.minPrice = null;
        }
      })
    );
  } catch (error) {
    ElMessage.error('查询失败，请稍后重试');
  }
};

// 处理每页显示数量变化
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  searchHotels();
};

// 处理页码变化
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  searchHotels();
};

// 跳转到酒店详情页
const viewHotelDetail = (hotelId) => {
  router.push({
    name: 'HotelDetail',
    params: { id: hotelId }
  });
};

// 初始化加载
onMounted(() => {
  searchHotels();
});
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.hotel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.hotel-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.hotel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.hotel-name {
  padding: 15px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

.hotel-name h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.star-rating {
  margin-top: 5px;
}

.hotel-image {
  flex: 1;
  overflow: hidden;
}

.hotel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.hotel-image img:hover {
  transform: scale(1.05);
}

.hotel-footer {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f7fa;
  border-top: 1px solid #ebeef5;
}

.price {
  color: #ff6700;
  font-weight: bold;
  font-size: 16px;
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>